<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* 想要菜单相对父组件显示需要在外层添加 position: relative; */
      .outer {
        position: relative;
        /* margin-top:20px; */
      }
      #map {
        height: 95vh;
        overflow: auto;
      }
      .mask {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background:rgba(0, 0, 0, 0.4);
        z-index: 900;
      }
      .dialog{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
      }
      .close{
        position: fixed;
        top: 30px;
        right: 40px;
        z-index: 930;
      }
      .custom-btn{
        cursor: pointer;
        padding:3px 12px;
      } 
      #preview {
        z-index: 920;
      }
      .save{
        /* margin: 10px auto 0; */
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 900;
        right: 20px;
        width: 100px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        font-size:14px;
        background:#00aaff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="save" onclick="exportData()">保存</div>
    <div class="outer">
      <div id="map"></div>
    </div>
    <div class="mask" style="display: none;">
      <div class="dialog">
        <img id="preview" src="" alt="">
      </div>
      <button class="close custom-btn">关闭</button>
    </div>
    <script type="text/javascript" src="mind-elixir.js"></script>
  </body>
  <script>
    let mind;
    function preview(key) {
      document.getElementById("preview").src = key
      document.querySelector(".mask").style.display = "block"
    }
    document.querySelector(".close").onclick = () => {
      document.querySelector(".mask").style.display = "none"
    }
		window.onload = function () {
        let data = localStorage.getItem("data")
        var url = "data.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
        var request = new XMLHttpRequest();
        request.open("get", url);/*设置请求方法与路径*/
        request.send(null);/*不发送数据到服务器*/
        request.onload = function () {/*XHR对象获取到返回信息后执行*/
            if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                var json = JSON.parse(request.responseText);
                console.log('MindElixir.SIDE', MindElixir.SIDE)
                mind = new MindElixir({
                  el: '#map',
                  newTopicName: '新的节点',
                  direction: MindElixir.SIDE,
                  //data:data ? JSON.parse(data) : json,
                  data:data ? JSON.parse(data) : MindElixir.example,
                  draggable: true,
                  contextMenu: true,
                  toolBar: true,
                  nodeMenu: true,
                  keypress: true,
                })
                mind.init()
                console.log('test E function', E('bd4313fbac40284b'))
            }
        }
    }
    function exportData() {
      console.log("-----------------")
      console.log(mind.getAllDataString())
      console.log(mind.getAllData())
      localStorage.setItem("data",mind.getAllDataString())
      alert("保存成功")
    }
  </script>
</html>
